「Vue.js v |
您所在的位置：网站首页 › vue v-hide › 「Vue.js v |
「Vue.js v
|
こんにちは。イネーブリングチームでフロントエンド領域のリードエンジニアをしている鵜木(@nokki_y)です。 今回は先日参加した「Vue.js v-tokyo Meetup #16」の様子をお伝えします！ # イベント概要 開催日: 2023年2月17日(金) イベント名: Vue.js v-tokyo Meetup #16 イベントタグ: #v_tokyo16 イベント主催団体: Vue.js 日本ユーザーグループ (Vue.js Japan User Group)Vue.js v-tokyo Meetupは日本最大のVue.jsコミュニティであるVue.js 日本ユーザーグループが主催するイベントです。 今回は約3年ぶりのオフライン開催でした。私自身も久しぶりにオフラインイベントに参加したのでここだけの話少し緊張しました。 ユーザーグループの公式noteやイベントタグ(#v_tokyo16)には、会場の写真等もアップされているので気になる方は覗いてみてください！ # タイムテーブル 開始時間 時間 内容 発表者 19:00 開場 19:30 10分 オープニング kazupon 氏 19:40 10分 スポットイベントスポンサーセッション STORES 株式会社 様 (梅木綾佑 氏) 19:50 5分 会場スポンサーLT アララ株式会社 様 (髙木凜 氏) 19:55 20分 LT x 3 R.D.Sakamoto 氏 / keigo 氏 / TakumaKurosawa 氏 20:15 20分 Nuxt3入門 ushironoko 氏 20:35 10分 休憩 20:45 20分 Nuxt3マイグレーションのリアル 後川菜穂子 氏 21:05 20分 座談会およびQ&A ushironoko 氏 / 後川 菜穂子 氏 / kazupon 氏 / kiaking 氏 21:25 5分 おわりに kazupon 氏こちらのタイムテーブルはイベント開始前に公開されていたものです。当日少し変更がありました。 ここからいくつかピックアップして当日の発表内容をレポートします！ # スポットスポンサーセッション タイトル: 「Nuxt3 移行に向けてがんばっています」 登壇者: STORES 株式会社様 梅木綾佑 氏（Twitter）speakerdeck.com ## 要約 社内の有識者でワーキンググループを作りNuxt3へのマイグレートを推進している。 Nuxt2から直接Nuxt3へマイグレートするのではなくNuxt Bridge*1 経由で段階的にマイグレートしている。 Nuxt BridgeはVue v2.7.xに依存しているので、使用しているモジュール含め諸々Vue.js v2.7.xにマイグレートした。 ## 詳細Nuxt BridgeはVue.js v2.7.xに依存しているので、使用している使用しているモジュール含め諸々Vue.js v2.7.xにマイグレートした。 Nuxt Bridgeへのマイグレートに伴い社内で自作しているUIライブラリをVue.js v2.7.xにバージョンアップした。 Jestを使用していたがVue.js v2.7.xにバージョンアップしたらテストがほぼ動かなくなったのでVitestにマイグレートした。 - Vitestへのマイグレートによりテストの実行時間が伸びた。その分、Github Actionsでの処理を並列化することで最終的に実行時間を60%削減した。Vue3へのマイグレート マイグレートに伴い1240ファイルの修正が必要となったため修正スクリプトを作成した。 結論、以下のステップで段階的にマイグレートした。 Nuxt2からNuxt BridgeへのマイグレートとVue.js v2.7.xへのマイグレート Vue.js v2.7.xからVue.js v3.0.0へのマイグレート Nuxt BridgeからNuxt3へのマイグレート # LT タイトル: 「VueUseのススメ」 登壇者: TakumaKurosawa 氏（Twitter）speakerdeck.com ## 要約VueUseの様々なユースケースが紹介されていました。ここではその一部を抜粋します。より詳細なものが気になる方は上記スライドを覗いてみてください！ Undo & redo - useRefHistory Slide show - useScroll infinity scroll - useInfiniteScroll Floating panel - useDraggableやっぱりVueUseを使えば複雑な計算処理も簡単に実装できますね。実装が億劫に感じるときは一度VueUseを探ってみることをおすすめします！ # メインセッション タイトル: 「Nuxt3入門」 登壇者: ushironoko 氏（Twitter）slides.com ## 要約 Nuxt3のはじめかた Nuxt3の便利機能を色々紹介Nuxt3のはじめかた さくっと始めたいならnuxt.new。スターターテンプレートを使う。 普通に始めるならこのドキュメントに従う。Nuxt3の便利機能を色々紹介 Nuxt3の様々な便利機能が紹介されていました。こちらでもその一部を抜粋します！ useAsyncData非同期データの管理に使えるComposableです。非同期処理であればデータ取得以外の用途でも使用できます。またデフォルトでレスポンスをキャッシュしてくれます。 useAsyncDataを使わず実装する場合、SWRVを使う等の工夫が必要なので、とても便利なComposableですね。 APIの単位を小さく分割している設計と相性が良さそうです。 useFetchこちらはデータ取得に特化したuseAsyncDataのラッパーです。 /server/api以下に作成されたAPIのレスポンスへ自動的に型を付与してくれます。 Vue3の登場によりTypeScriptを使う機会が更に増えると思うので、こちらもとても便利ですね。 こちらの発表では上記で紹介したComposable以外にNuxt LayersやNuxt Kitなどの便利機能も紹介されていました。 ここでは紹介しきれないので、気になる方は発表資料を覗いてみてください！ # 座談会およびQ&A 登壇者: ushironoko 氏 / 後川 菜穂子 氏 / kazupon 氏 / kiaking 氏 ここでこの日、初登壇となったのはkazupon氏(Twitter)とkiaking氏(Twitter)。2人共Vue.js開発のコアメンバーです。 ## 印象に残った話 Vue3へのマイグレート方法についてVue.js開発コアメンバーたちはOptions APIのままVue3へマイグレートした後にCompositions APIに置き換える方針が多く取り入れられると予想していたらしい。しかし最近はマイグレートのタイミングでComposition APIに書き換える方針を割と耳にするとのこと。 座談会登壇者のNuxt使用状況についてこの日のメインコンテンツがNuxtだったこともあり、登壇者の多くが業務でNuxtを使用していた。しかしkazupon氏はプライベート開発でNuxtを使用しているものの、業務では使用していないとのこと。 # 個人的な感想今回のイベントは参加してとても良かったです。私が現在メインで関わっているプロダクトではNuxtを使用していませんが、Nuxt機能を知ることでプロダクトに導入したいと思う機能をいくつか思いつきました。 導入したいと考えた具体的な機能は他の記事にしたいと思いますので、ここでは発表されたことに触れつつ私の考えるを少しだけ書きます。 現在関わっているプロダクトにNuxtを導入するかどうか結論を先に書くと、おそらく導入しません。 語弊のないようにお伝えるすると、Nuxtはめちゃくちゃ良いフレームワークになっていました！しかし以下の観点からNuxt導入に懸念を抱いています。 Nuxtを導入するとマイグレーション時にNuxtとVue.jsの両方のバージョンを意識した計画が必要となる Nuxtの方針から逸脱する場合のリスクとコストを許容する自信がない1つ目については発表内容に情報がたくさんあるのでここでは割愛し、2つ目の具体例だけ記載します。 NuxtにはAuto imports機能というnuxt.configで指定したディレクトリを自動的にインポートしてくれる機能があります。（各ファイルで使用するときにimport文を書かなくてよくなる機能です）。 とても便利な機能なのでNuxtで開発を開始する際に使用すると思います。しかし機能が増えコードが増えてるにつれてレイヤーや依存関係を定義したくなるケースが私の経験上は多かったです。 その際にAuto impotsにより生まれた依存関係をどうプログラムで制御すればよいのか。Nuxtでできるのだろうか？NuxtでできないならAuto impots機能をOFFにして、全てのImport文を書き直して・・？というように、Nuxtを使っていなければシンプルに対応できる問題もひと手間掛かりそうだと考えています。 ちょっと頑張れば自力で実装できるNuxt機能のみを使用したいなら、将来の心配事を避けたいと考えてしまう派です。 ただNuxtを使用することにより開発初期フェーズのスピードは確実に上がるので、 向こう5年は使われるであろうプロダクト*2 Nuxtを使用しない プロダクトが軌道に乗らなければ1年後に存在しない可能性のあるプロダクト Nuxtを使う 自力実装が大変なNuxt機能を使いたい*3 Nuxtを使うといった使い分けを個人的に考えました。私がメインで関わるプロダクトは1つ目に該当するので、そのプロダクトにはNuxt導入をしないでおこうと考えています。 # さいごに久しぶりにオフラインイベントに参加しましたが本当に良かったです！オンラインだと作業をしながら視聴することもできるので、自分と関係の薄い話だと聞き流してしまうことがあります。メインプロダクトでNuxtを使用していないこともあり、今回のNuxtの話もオンラインだと聞き逃していたかもしれません。 オフラインだからこそ自分ごとに引き寄せて色々な思考をできたと思うので、これからもコロナに気を付けながらオフラインイベントに参加していきたいです！ *1:Nuxt BridgeはNuxt2でNuxt3の機能を一部使用できる、試験移行用のNuxtモジュール *2:メジャーバージョンアップの機会が下手すると2回位あるということと、コード全体に対する変更可能性も読めない等々の理由 *3:SSRを真っ先に思いつきました |
【本文地址】